<template>
  <div class="detail">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品详情"
      left-text=""
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      :class="header1"
    >
      <template #right>
        <van-image
          width="0.45rem"
          height="0.45rem"
          :src="imgUrl"
          @click="showShare = true"
        />
        <van-share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </template>
    </van-nav-bar>

    <div class="top2" :class="header2">
      <img
        src="../assets/images/detail/pic1.png"
        alt=""
        class="arrows"
        @click="onClickLeft"
      />
      <!-- <div 
        class="txt" 
        v-for="(item, index) in txtList" 
        :key="item.title"
        :class="{ bolder: index === num }"
        @click="switchto(index)"
      >
        {{ item.title }}
      </div> -->
      <van-tabs v-model:active="activeName">
        <van-tab title="商品" name="a"></van-tab>
        <van-tab title="店铺" name="b"></van-tab>
        <van-tab title="详情" name="c"></van-tab>
      </van-tabs>
      <div>
        <van-image
          width="0.45rem"
          height="0.45rem"
          :src="imgUrl"
          @click="showShare = true"
        />
        <van-share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </div>
    </div>
    <!-- 商品图片 -->
    <div class="shop-pic">
      <img :src="detailDate.arr.imgUrl" alt="" />
      <img src="../assets/images/detail/pic3.png" alt="" />
    </div>

    <!-- 简介部分 -->
    <div class="introduction">
      <!-- 价格部分 -->
      <div class="price">
        <div class="price-pri">
          <span class="logo">￥</span>
          <span class="price-money">{{ pri }}</span>
          <span class="price-zhe">会员8折</span>
        </div>
        <img src="../assets/images/detail/pic4.png" alt="" />
        <div class="price-drug">
          <span class="price-kind">处方药</span>
          <span class="price-name">{{ detailDate.arr.title }}</span>
        </div>
        <van-grid direction="horizontal" :column-num="3">
          <van-grid-item
            v-for="item in priceList"
            :key="item.url"
            :icon="item.url"
            :text="item.txt"
          />
        </van-grid>
      </div>
      <!-- 预约流程 -->
      <div class="flow">
        <h3>药品预约流程</h3>
        <div class="flow-box">
          <div>
            <img src="../assets/images/detail/pic15.png" alt="" />
            <p>1.需求预定</p>
          </div>
          <img src="../assets/images/detail/pic2.png" alt="" class="img" />
          <div>
            <img src="../assets/images/detail/pic16.png" alt="" />
            <p>2.问诊开方</p>
          </div>
          <img src="../assets/images/detail/pic2.png" alt="" class="img" />
          <div>
            <img src="../assets/images/detail/pic18.png" alt="" />
            <p>3.药师审核</p>
          </div>
          <img src="../assets/images/detail/pic2.png" alt="" class="img" />
          <div>
            <img src="../assets/images/detail/pic19.png" alt="" />
            <p>4.药房配送</p>
          </div>
        </div>
      </div>
      <!-- 适应症 -->
      <div class="adapt">
        <div class="adapt-title">
          <span class="adapt-title1">适应症</span>
          <span class="adapt-title2">说明书 ></span>
        </div>
        <p>各种原因所致的软组织肿胀、静脉性水肿。</p>
      </div>

      <!-- 规格 -->
      <div class="speci">
        <div class="speci1">
          <span class="speci-title">规格</span>
          <span class="speci-txt">30mg*12片*2板</span>
        </div>
        <div class="speci2">
          <span class="speci-title">配送</span>
          <span class="speci-txt">快递配送</span>
        </div>
      </div>

      <!-- 进店 -->
      <div class="store">
        <img
          src="../assets/images/detail/pic22.png"
          alt=""
          class="store-logo"
        />
        <div class="store-box">
          <h3>益丰大药房</h3>
          <div class="store-box1">
            <img
              src="../assets/images/detail/pic14.png"
              alt=""
              class="store-pic"
            />
            <span>自营店铺</span>
          </div>
        </div>
        <span>进店 ></span>
      </div>
    </div>

    <!-- 说明书 -->
    <div class="instruction">
      <h3>说明书</h3>
      <div class="instruction-box">
        <p>
          为了您的用药安全，请自习阅读药品说明书注意事
          项、禁忌内容，并按照说明书或者药师知道进行购
          买和使用，药品不支持7天无理由退货
        </p>
      </div>
      <div class="indication">
        <div class="indication-box">
          <img src="../assets/images/detail/pic12.png" alt="" />
          <span>适应症</span>
        </div>
        <p>各种原因所致的软组织肿胀、静脉性水肿。</p>
      </div>
      <div class="usage">
        <div class="indication-box">
          <img src="../assets/images/detail/pic13.png" alt="" />
          <span>用法用量</span>
        </div>
        <p>口服，一次2片，2次/天</p>
      </div>
      <div class="other">
        <div class="other-box">
          <img src="../assets/images/detail/pic11.png" alt="" />
          <span>其他说明</span>
        </div>
        <div class="other-list">
          <div class="other-list1" v-for="item in shuoming" :key="item.txt">
            <p class="other-list1-txt">{{ item.title }}</p>
            <p class="other-list1-txt1">{{ item.txt }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 药品介绍 -->
    <div class="introduce">
      <h3>药品介绍</h3>
      <div class="introduce-particulars">
        <div
          class="introduce-particulars-list"
          v-for="item in introduceList"
          :key="item.txt"
        >
          <p>{{ item.title }}</p>
          <p>{{ item.txt }}</p>
        </div>
      </div>
    </div>

    <!-- 购买须知 -->
    <div class="shopknow">
      <h3>购买须知</h3>
      <div class="shopknow-list">
        <div class="shopknow-txt1">
          <span class="shopknow-txt1-dian"></span>
          <span class="shopknow-txt1-title">发货须知</span>
          <div class="shopknow-txt1-txt">
            <p>
              1.本店为您选择默认的快递公司，不接受指定快递，如因天气
              等不可控因素造成物流较慢，敬请原谅。
            </p>
            <p>2.私密发货，包裹不泄露任何产</p>
          </div>
        </div>
      </div>
      <div class="shopknow-list">
        <div class="shopknow-txt1">
          <span class="shopknow-txt1-dian"></span>
          <span class="shopknow-txt1-title">发票及退换货</span>
          <div class="shopknow-txt1-txt">
            <p>1.本店开具正规税务发票，如需发票，请联系商家。</p>
            <p>
              2.非药品商品在包装未损坏不影响二次小手的情况下支持7天无
              理由退换货；因买家个人原因而选择退货，运费由买家承担。
            </p>
          </div>
        </div>
      </div>
      <div class="shopknow-list">
        <div class="shopknow-txt1">
          <span class="shopknow-txt1-dian"></span>
          <span class="shopknow-txt1-title">收货须知</span>
          <div class="shopknow-txt1-txt">
            <p>
              接收包裹后请先检查再签字，如发现清单有误请及时联系商
              家，所有责任均由商家承担，签字后我们将不承担任何责任。
              若货物破损，请及时联系商家，货物均由快递退回。
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>
      <van-action-bar>
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-button round type="primary" class="add">加入购物车</van-button>
        <van-button round type="primary" color="#1E8DFF" class="buy"
          >立即购买
        </van-button>
      </van-action-bar>
    </footer>
    <!-- 回到顶部 -->
    <div class="toTop" @click="toTop" :class="flag">
      <img src="../assets/images/detail/pic6.png" alt="" />
    </div>
    <div></div>
  </div>
</template>
<script>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import { Toast } from "vant";

import { getDetailApi } from "../utils/api";
export default {
  setup() {
    const imgUrl = ref(require("../assets/images/detail/pic7.png"));
    const priceList = reactive([
      {
        url: require("../assets/images/detail/pic9.png"),
        txt: "急速送达",
      },
      {
        url: require("../assets/images/detail/pic21.png"),
        txt: "正品保证",
      },
      {
        url: require("../assets/images/detail/pic20.png"),
        txt: "药品验证",
      },
    ]);
    const shuoming = reactive([
      {
        title: "主要成分",
        txt: "本品主要成分是本品主要成份 为七叶皂苷钠。",
      },
      {
        title: "用药禁忌",
        txt: "对本品任何成分过敏者禁用。",
      },
      {
        title: "不良反应",
        txt: "个别情况下出现轻微胃肠道不 适，不需要停药。",
      },
      {
        title: "药物相互作用",
        txt: "未见有关在使用七叶皂苷钠片 期间发生与其他药物相互作用 的报道。如同时使用其他药 物，请告知医生。",
      },
      {
        title: "注意事项",
        txt: "1.放置儿童不易触及的地方。2. 如服用本品期间出现任何不良 反应，请告知医生。请仔细阅 读说明书并遵医嘱使用。",
      },
      {
        title: "药理毒性",
        txt: "药理作用: 1.降低血管通透性:对血清中的溶酶体活性具有明显的抑制作用，稳定溶酶体膜，阻碍蛋白酶的代谢，降低毛细血管的通透性，对抗渗出，从而减少静脉性充血，减轻组织肿胀，缩小肿胀的周径，减少栓塞的体积，达到预防和治疗静脉性水肿、组织水肿的作用。2.增加静脉回流，减轻静脉淤血症状:七叶皂苷钠可作用于血管内皮细胞感受器，引起静脉收缩，增加静脉回流量，改善淤血症状如:肢体肿胀、疼痛、瘙痒、疲劳和沉重感等同时还能明显降低血液粘稠度。3.增强血管弹性，增加血管张力:通过抑制血液中蛋白酶的作用，静脉壁糖蛋白胶原纤维不受破坏，回复静脉的强度及弹性。",
      },
    ]);
    const introduceList = reactive([
      {
        title: "规格",
        txt: "30mg*12片*2板",
      },
      {
        title: "类型",
        txt: "处方药",
      },
      {
        title: "剂型",
        txt: "片剂",
      },
      {
        title: "性状",
        txt: "本品为薄膜衣片，除去包衣后 显类白色至浅棕黄色。",
      },
      {
        title: "贮藏",
        txt: "遮光，密闭保存。",
      },
      {
        title: "批准文号",
        txt: "国药准字H20051590",
      },
    ]);
    const txtList = reactive([
      {
        title: "商品",
      },
      {
        title: "店铺",
      },
      {
        title: "详情",
      },
    ]);
    let y = document.documentElement.scrollTop;
    let flag = ref("hidden");
    let header1 = ref("active");
    let header2 = ref("hidden");
    // 请求数据
    const router = useRouter();
    const route = useRoute();
    let detailDate = reactive({
      arr: [],
    });
    const activeName = ref("a");
    let pri = ref(null);
    const id = route.params.id;
    // console.log(route.params.id);
    // const id = ref("60ebe5c3ad91538868e4694b");
    const getShop = async () => {
      const res = await getDetailApi({
        _id: id,
        token: sessionStorage.getItem("token"),
      });
      detailDate.arr = res.result[0];
      pri.value = detailDate.arr.price.slice(1);
      // console.log(res.result)
    };
    // 返回按钮
    const onClickLeft = () => {
      router.go(-1);
    };

    // 事件判断回到顶部的显隐
    const show = () => {
      // console.log(id);
      if (document.documentElement.scrollTop > 500) {
        flag.value = "active";
      } else {
        flag.value = "hidden";
      }
      if (document.documentElement.scrollTop > 340) {
        header1.value = "hidden";
        header2.value = "active";
      } else {
        header1.value = "active";
        header2.value = "hidden";
      }
    };

    onMounted(() => {
      window.addEventListener("scroll", show);
      // id.value = route.params.id
      getShop();
    });

    // 回到顶部
    const toTop = () => {
      document.documentElement.scrollTop = 0;
    };

    // 分享
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

    let num = null;
    const switchto = (index) => {
      num = index;
      console.log(num);
    };
    return {
      imgUrl,
      priceList,
      shuoming,
      introduceList,
      id,
      y,
      flag,
      header1,
      header2,
      txtList,
      num,
      detailDate,
      pri,
      getShop,
      onClickLeft,
      toTop,
      show,
      options,
      onSelect,
      showShare,
      switchto,
      activeName,
    };
  },
};
</script>
<style lang="less">
@import "../assets/css/var.less";
.detail {
  width: 100%;
  background: #f5f5f5;
  // 顶部
  .van-icon {
    color: #666;
    font-size: 22px;
  }
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
  }

  .van-nav-bar__title {
    font-size: 18px;
    font-weight: bold;
  }
  // 商品图片
  .shop-pic {
    background: #fff;
    text-align: center;
    position: relative;
    :first-child {
      width: 325px;
      height: 325px;
    }
    :last-child {
      width: 35px;
      height: 22px;
      position: absolute;
      bottom: 10px;
      right: 25px;
    }
  }
  // 简介部分
  .introduction {
    padding: 12px;
    // 价格部分
    .price {
      width: 100%;
      background: #fff;
      padding: 12px;
      border-radius: 10px;

      .price-pri {
        margin-bottom: 10px;
        .logo {
          font-size: 15px;
          color: #ff5446;
        }
        .price-money {
          font-size: 22px;
          color: #ff5446;
        }
        .price-zhe {
          display: inline-block;
          width: 45px;
          height: 17px;
          color: #ffe398;
          background: black;
          font-size: 12px;
          text-align: center;
          line-height: 17px;
          margin-left: 10px;
          border-radius: 3px;
        }
      }

      img {
        width: 330px;
        height: 34px;
      }

      .price-drug {
        .price-kind {
          display: inline-block;
          width: 37px;
          height: 14px;
          background: #52c91f;
          color: #fff;
          font-size: 12px;
        }
        .price-name {
          margin-left: 5px;
          font-size: 16px;
          font-weight: bold;
        }
      }

      .van-grid {
        font-size: 13px;
        .van-grid-item__content--center {
          align-items: flex-start;
        }
        img {
          width: 13px;
          height: 13px;
        }
        .van-badge__wrapper {
          height: 0;
        }
        .van-grid-item__text {
          line-height: 13px;
        }
      }
    }
    // 预约流程
    .flow {
      .border();
      h3 {
        font-size: 16px;
      }
      .flow-box {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .img {
          width: 5px;
          height: 8px;
          margin: auto 0;
        }
        div {
          text-align: center;
          img {
            width: 14px;
            height: 20px;
          }
          p {
            font-size: 12px;
            color: #b2b2b2;
          }
        }
      }
    }

    // 适应症
    .adapt {
      .border();
      .adapt-title {
        display: flex;
        justify-content: space-between;

        .adapt-title1 {
          font-size: 16px;
          font-weight: bold;
        }
        .adapt-title2 {
          font-size: 12px;
          color: #999;
        }
      }
      p {
        font-size: 14px;
        margin-top: 15px;
      }
    }

    // 规格
    .speci {
      .border();
      .speci-title {
        font-size: 14px;
        color: #666666;
        line-height: 25px;
        margin-right: 50px;
      }
      .speci-txt {
        font-size: 14px;
        color: #999;
        line-height: 25px;
      }
    }

    // 店铺
    .store {
      display: flex;
      justify-content: space-between;
      .border();
      .store-logo {
        width: 42px;
        height: 37px;
      }
      .store-box {
        margin-right: 80px;

        h3 {
          font-size: 16px;
          margin-bottom: 8px;
        }
        .store-box1 {
          img {
            width: 13px;
            height: 13px;
            float: left;
          }
          span {
            font-size: 12px;
            color: #999;
            float: left;
          }
        }
      }
      :last-child {
        font-size: 12px;
        color: #999;
      }
    }
  }

  // 说明书
  .instruction {
    background: #fff;
    padding: 12px;
    margin-bottom: 12px;
    h3 {
      font-size: 16px;
    }
    .instruction-box {
      margin-top: 12px;
      padding: 12px 36px 12px 12px;
      background: #ebf8ff;
      border-radius: 10px;
      color: #1485f9;
      font-size: 14px;
    }
    // 适应症
    .indication {
      padding: 12px;
      height: 100px;
      .indication-box {
        img {
          width: 12px;
          height: 12px;
          vertical-align: middle;
        }
        span {
          font-size: 14px;
          color: #1485f9;
          margin-left: 7px;
        }
      }
      p {
        font-size: 14px;
        margin-top: 16px;
      }
    }
    // 用法
    .usage {
      padding: 12px;
      height: 100px;
      .indication-box {
        img {
          width: 12px;
          height: 12px;
          vertical-align: initial;
        }
        span {
          font-size: 14px;
          color: #1485f9;
          margin-left: 7px;
        }
      }
      p {
        font-size: 14px;
        margin-top: 16px;
      }
    }
    // 其他说明
    .other {
      padding: 12px;
      .other-box {
        img {
          width: 12px;
          height: 12px;
          vertical-align: initial;
        }
        span {
          font-size: 14px;
          color: #1485f9;
          margin-left: 7px;
        }
      }

      .other-list {
        border: 1px solid #ebebeb;
        .other-list1 {
          padding: 20px 13px;
          border-bottom: 1px solid #ebebeb;
          display: flex;
          .other-list1-txt {
            width: 120px;
            font-size: 14px;
            color: #999;
          }
          .other-list1-txt1 {
            width: 170px;
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
    }
  }

  // 药品介绍
  .introduce {
    width: 100%;
    background: #fff;
    padding: 15px 12px;
    margin-bottom: 12px;

    h3 {
      font-size: 16px;
    }
    .introduce-particulars {
      margin: 20px auto 0;
      width: 326px;
      border: 1px solid #ebebeb;

      .introduce-particulars-list {
        padding: 20px 12px;
        border-bottom: 1px solid #ebebeb;
        font-size: 14px;
        display: flex;
        :first-child {
          width: 120px;
          color: #999;
        }
        :last-child {
          width: 170px;
          color: #333;
        }
      }
    }
  }
  // 购买须知
  .shopknow {
    padding: 12px;
    background: #fff;
    padding-bottom: 50px;
    h3 {
      font-size: 16px;
    }
    .shopknow-list {
      margin-top: 7px;

      .shopknow-txt1 {
        font-size: 12px;
        margin-bottom: 12px;
        .shopknow-txt1-dian {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #1e8dff;
          margin-right: 6px;
        }
        .shopknow-txt1-title {
          font-weight: bold;
          color: #333;
        }
        .shopknow-txt1-txt {
          margin-top: 10px;
          line-height: 18px;
          color: #999;
          padding-left: 15px;
        }
      }
    }
  }

  footer {
    .van-action-bar {
      padding-left: 20px;
      .add {
        border: 1px solid #1e8dff;
        background: #fff;
        color: #1e8dff;
        width: 120px;
      }
      .buy {
        margin-left: 10px;
      }
    }
  }

  // 回到顶部
  .toTop {
    position: fixed;
    right: 30px;
    bottom: 100px;
    img {
      width: 44px;
      height: 44px;
    }
  }

  .top2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 46px;
    background: #fff;
    z-index: 99;
    .arrows {
      width: 10px;
      height: 20px;
    }

    .van-tab {
      width: 75px;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
.active {
  visibility: visible;
}
.hidden {
  visibility: hidden;
}
</style>
